<!-- 添加标点 -->
<template>
	<view class="content">
		<view>
			<view style="height:670rpx"id="wrapper"></view>
			<view style="margin: 30rpx;"> 
				  <view style="margin-left: 30rpx;">
				    <!-- 第一行 -->
				    <view style="display: flex;">
				      <!-- 保养厂名 -->
				      <view>{{ store.name }}</view>
				      <view style="margin-left: 60%;">{{ store.distance }}m</view>
				    </view>
					<!-- 封装23行 -->
					<view style="display: flex;" id="list">
						<!-- 再次封装 -->
						<view style="flex-direction: column;">
							<!-- 第二行 -->
							<view style="display: flex;">
							  <!-- 星级 -->
							  <view>{{ store.star }}</view>
							  <!-- 评分 -->
							  <view style="margin-left: 20%;">{{ store.score }}</view>
							</view>
							<!-- 第三行 -->
							<!-- 营业时间 -->
							<view>营业时间：{{ store.businessHours }}</view>
							<view>{{ store.address }}</view>
							
						</view>
						<!-- 显示图片 -->
						<view style="margin-left: 20%;margin-top: 10rpx;">
							<image :style="{width: '180rpx', height: '100rpx'}" :src="store.logo"></image>
						</view>
						
					</view>
					<view style="display: flex;">
						<button style="width: 500rpx;border-radius:10%;">联系门店</button>
						<button style="width: 500rpx;">立即预定</button>
					</view>
					
	
				  </view>
			</view>

		</view>
	</view>
</template>

<script>
	let mapObj = null; // 生成地图实例
    // ------------------------------ 更新内容1 ----------------------------- //
	// 创建多个标点
	let agriculture = []; // 生成图标实例1
	let property = []; // 生成图标实例2
	let construction = []; // 生成图标实例3
	let noRented = []; // 生成图标实例4
	let marker = []; // 生成标点实例
    // ---------------------------------------------------------------------- //

	window.mapInit = function() { // 挂载地图实例
		mapObj = new TMap.Map("wrapper", {
			center: new TMap.LatLng(22.24, 113.47), // 地图初始坐标
			zoom: 13, // 缩放等级
			zoomControl: false, // 设置是否启用缩放控件
		});

		mapObj.on("click", function(evt) { // 地图全局事件
			mapObj.setCenter(new TMap.LatLng(evt.latLng.getLat().toFixed(6), evt.latLng.getLng().toFixed(6)))
		})
	}

	export default {
		data() {
			return {
				
				
				store: {
				        logo: "../../../static/logo.png",
				        name: "卓越保养厂",
				        distance: 800,
				        star: "★★★★☆",
				        score: "4.8",
				        sales: 150,
				        businessHours: "8:30 - 17:30",
				        address: "XX 市 XX 区 XX 大街 XX 号"
				      },
				
		
				key: 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77',
                // ------------------------------ 更新内容2 ----------------------------- //
				iconItem: [{ // 模拟数据
					name: 'agriculture', // 样式类型
					src: require("../zuobiao/31.png"), // 图片路径
					position: [22.227959, 113.459589], // 标点中心坐标
					markerUrl: require("../zuobiao/31.png"), // 标点图片样式
				}, {
					name: 'property',
					src: require("../zuobiao/31.png"),
					position: [22.253496, 113.477076],
					markerUrl: require("../zuobiao/31.png"),
				}, {
					name: 'construction',
					src: require("../zuobiao/31.png"),
					position: [22.237834, 113.463987],
					markerUrl: require("../zuobiao/31.png"),
				}, {
					name: 'noRented',
					src: require("../zuobiao/31.png"),
					position: [22.253692, 113.498333],
					markerUrl: require("../zuobiao/31.png"),
				},{
					name: 'base',
					src: require("../zuobiao/81.png"),
					position: [22.24, 113.47],
					markerUrl: require("../zuobiao/81.png"),
				} ]
                // ---------------------------------------------------------------------- //
			}
		},
		onLoad() {
			// #ifdef H5
			this.loadScrpit();
			// #endif
			
            // ------------------------------ 更新内容3 ----------------------------- //
			let time = setInterval(() => { // 等待地图挂载
				if (mapObj != null) {
					clearInterval(time);
					this.setIcon(); // 挂载坐标图片信息
				}
			}, 100)
            // ---------------------------------------------------------------------- //
		},
		methods: {
			// 初始化
			loadScrpit() { // 挂载js
				var script = document.createElement('script');
				script.src =
					`https://map.qq.com/api/gljs?v=1.exp&key=${this.key}&libraries=visualization&callback=mapInit`;
				document.body.appendChild(script);
			},
            // ------------------------------ 更新内容4 ----------------------------- //
			setIcon() { // 创建标点图标
				let that = this;
				// 创建 AMap.Icon 实例
				agriculture = new TMap.MarkerStyle({
					"width": 12, // 定义宽，单位：PX
					"height": 20, // 定义高，单位：PX
					"src": that.iconItem[0].markerUrl, // 标点图片链接：本地图片
				})
				property = new TMap.MarkerStyle({
					"width": 12,
					"height": 20,
					"src": that.iconItem[1].markerUrl,
				})
				construction = new TMap.MarkerStyle({
					"width": 12,
					"height": 20,
					"src": that.iconItem[2].markerUrl,
				})
				noRented = new TMap.MarkerStyle({
					"width": 12,
					"height": 20,
					"src": that.iconItem[3].markerUrl,
				})
				this.setMapMarker(); // 调用创建标点
			},
			setMapMarker() { // 创建标点实例
				let geometries = [];

				for (let i = 0; i < this.iconItem.length; i++) {
					let obj = { // 点标记数据
						"id": i, //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
						"styleId": this.iconItem[i].name, // 对应标点实例的style的名称
						"position": new TMap.LatLng(this.iconItem[i].position[0], this.iconItem[i].position[1]), // 标点的坐标
						"properties": { // 自定义属性
							"title": this.iconItem[i].name
						}
					}
					geometries.push(obj);
				}

				marker = new TMap.MultiMarker({ // 构造函数创建标点实例
					id: 'marker-layer', // 定义的ID名称
					map: mapObj, // 挂载的地图实例
					styles: { // 加入标点的样式
						"agriculture": agriculture,
						"property": property,
						"construction": construction,
						"noRented": noRented,
					},
					geometries: geometries // 点标记数据数组
				});
			},
            // ---------------------------------------------------------------------- //
		}
	}
</script>

<style>


#list > view {
  margin: 10rpx;
}


</style>
